Re: tick box is wrong colour on mobile devices?

tim cross · ‎Mar 17, 2021

I have tried in on iphone IOS and Android Haawei P smart and get the same issue. that the background colour is black and not blue.

tim cross · ‎Mar 17, 2021

hope you can help? I have got a standard tick button box which when you click on it goes blue with a white tick in it. This works on my computer but when I view it on a mobile phone the tick box is black and not blue. Not sure how to correct this? and why it is doing it Thanks Tim -------- -------- <!doctype html> <html lang="en-GB"> <head> <script> body{ padding:20px; } .big{ font-size: 50px; } /* CSS below will force radio/checkbox size be same as font size */ label{ position: relative; line-height: 1.4; } /* radio */ input[type=radio]{ width: 1em; font-size: inherit; margin: 0; transform: translateX(-9999px); } input[type=radio] + label:before{ position: absolute; content: ''; left: -1.3em; top: 0; width: 1em; height: 1em; margin: 0; border:none; border-radius: 50%; background-color: #bbbbbb; } input[type=radio] + label:after{ position: absolute; content: ''; left: -1.3em; top: 0; width: 1em; height: 1em; margin: 0; border: none; background-color: white; border-radius: 50%; transform: scale(0.8); } /*checked*/ input[type=radio]:checked + label:before{ position:absolute; content:''; left: -1.3em; top: 0; width: 1em; height: 1em; margin: 0; border: none; background-color: #3b88fd; } input[type=radio]:checked + label:after{ position: absolute; content: ''; left: -1.3em; top: 0; width: 1em; height: 1em; margin: 0; border: none; background-color: white; border-radius: 50%; transform: scale(0.3); } /*focused*/ input[type=radio]:focus + label:before{ border: 0.2em solid #8eb9fb; margin-top: -0.2em; margin-left: -0.2em; box-shadow: 0 0 0.3em #3b88fd; } /*checkbox/*/ input[type=checkbox]{ width: 1em; font-size: inherit; margin: 0; transform: translateX(-9999px); } input[type=checkbox] + label:before{ position: absolute; content: ''; left: -1.3em; top: 0; width: 1em; height: 1em; margin: 0; border:none; border-radius: 10%; background-color: #bbbbbb; } input[type=checkbox] + label:after{ position: absolute; content: ''; left: -1.3em; top: 0; width: 1em; height: 1em; margin: 0; border: none; background-color: white; border-radius: 10%; transform: scale(0.8); } /*checked*/ input[type=checkbox]:checked + label:before{ position:absolute; content:''; left: -1.3em; top: 0; width: 1em; height: 1em; margin: 0; border: none; background-color: #3b88fd; } input[type=checkbox]:checked + label:after{ position: absolute; content: "\2713"; left: -1.3em; top: 0; width: 1em; height: 1em; margin: 0; border: none; background-color: #3b88fd; border-radius: 10%; color: white; text-align: center; line-height: 1; } /*focused*/ input[type=checkbox]:focus + label:before{ border: 0.1em solid #8eb9fb; margin-top: -0.1em; margin-left: -0.1em; box-shadow: 0 0 0.2em #3b88fd; background-color: #3b88fd; } </script> </head> <body> <input type="checkbox" name="checkbox_1" id="ee" checked /> <label for="ee">Checkbox small</label> <br /> <input type="checkbox" name="checkbox_2" id="ff" /> <label for="ff">Checkbox small</label> <hr /> <div class="big"> <input type="checkbox" name="checkbox_3" id="gg" checked /> <label for="gg">Checkbox big</label> <br /> <input type="checkbox" name="checkbox_4" id="hh" /> <label for="hh">Checkbox big</label> </div> <hr /> <input type="radio" name="radio_1" id="aa" value="1" checked /> <label for="aa">Radio small</label> <br /> <input type="radio" name="radio_1" id="bb" value="2" /> <label for="bb">Radio small</label> <hr /> <div class="big"> <input type="radio" name="radio_2" id="cc" value="1" checked /> <label for="cc">Radio big</label> <br /> <input type="radio" name="radio_2" id="dd" value="2" /> <label for="dd">Radio big</label> </div> </script> </body> </html> ------- ------

tim cross · ‎May 16, 2020

On mobile devices the 'required popup panel' photo above the text is not centred correctly - its ok on a desktop computer. Not sure how to access this via CSS to correct alignment test error ?? <!DOCTYPE html> <html> <body> <h1>The input required attribute</h1> <form action="/action_page.php"> <label for="username">Username:</label> <input type="text" id="username" name="username" required> <input type="submit"> </form> </body> </html> Hope you can help? Tim

tim cross · ‎Jan 03, 2020

Thank You - there was a slight border on the Active/Focus file within the bootstrap CSS so have turned it off and now works perfectly 🙂

tim cross · ‎Dec 27, 2019

I am using tabs in Dreamweaver using bootstraps-4.3.1.css The tab works fine on a web browser but when I view it on an iPhone or iPad and I keep clicking between the tab, in the end, you see a white box around the text within the tab as shown in photo below. Not sure how to get rid of this error?? It does not show up all the time and sometimes you have to press it lots of times before the box appears http://tcdesignstamford.co.uk/test/test.html

tim cross · ‎Dec 07, 2019

Well, it does matter! because you are correct in that you do not build layouts for specific devices but sometimes your layout can be throwout slightly due to a new spec device. So its best to check it to make sure it works.

tim cross · ‎Dec 07, 2019

That's great - perfect. Thank You

tim cross · ‎Dec 06, 2019

Hi, Does anyone know what the media query sizes are for Iphone 11?? Iphone 8 is 375x667px Iphone x ? Iphone 11 ? Iphone 11 max ? Many thanks Tim

tim cross · ‎Nov 01, 2019

I contacted Adobe Support and they login to my computer and they could not solve the issue, so the issue was sent to a higher level of support, still waiting! I don't like giving up and I found the error myself. For some reason in the MacOS Library - preferences when I upgraded to Catalina it was having issues with some of the preference files, so I installed Dreamweaver and then deleted and preferences that were linked to Dreamweaver that were not auto-deleted and this correct the error I can now see my site and all the CSS files again 😉

tim cross · ‎Oct 31, 2019

I am using the latest version of Dreamweaver 19.2.1 - I cannot see any other updates on the creative cloud I have uninstalled Dreamweaver and setting and reloaded it but this makes no difference Yes I did restart my computer after Catalina was installed

tim cross · ‎Oct 30, 2019

I have upgraded to MacOS Catalina and for some reason, the CSS is not now working, not sure why? The CSS does show up in the 'sources' but the @Media and Selectors panels are empty Not sure how to correct this? Hope you can help Thanks Tim

tim cross · ‎Oct 18, 2019

Im not sure how to correct this. I am using a side scroll without a bar at the bottom. in dreamweaver it shows the same as chrome but in safari it adds extra space around it The error seems to be within this part of the css code .content { /* These rules create an artificially confined space, so we get a scrollbar that we can hide. They are not directly involved in hiding the scrollbar. */ border: 1px dashed gray; padding: .5em; white-space: pre-wrap; height: 5em; overflow-x: scroll; } .content { /* This is the magic bit for Firefox */ scrollbar-width: none; } .content::-webkit-scrollbar { /* This is the magic bit for WebKit */ display: none; } Demo https://codepen.io/tim-cross-the-encoder/pen/pooEQBg Chrome Safari brower Hop you can help Tim

tim cross · ‎Aug 04, 2019

Hi Nacy, The code is fine as it is, the issue is I need to hide the bottom scroll bar somehow, but not sure how to do this in the css?? As I said before it only shows like this on a PC computer as it shows as a block instead of fading over it Thanks Tim ------ <!doctype html> <html lang="zxx"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Untitled Document</title> <style> #parent{ width: 100%; height: 100%; overflow: hidden; } #child{ width: 100%; height: 100%; overflow-y: scroll; padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */ box-sizing: content-box; /* So the width will be 100% + 17px */ } /*! CSS Used from: http://www.tcdesignstamford.co.uk/tim/css/general.css */ *{margin:0;padding:0;} li{font-size:20px;} .font{font-family:'Fira Sans', sans-serif;} .red-panel{background-color:#FE0001;} .dark-grey-panel{background-color:#37494B;} a{color:#FFFFFF;text-decoration:none;} .scrollable-nav-container{margin:0 auto;background-color:#f2f2f2;display:flex;align-items:center;max-width:1200px;overflow-x :scroll;} .scrollable-nav-inner{ overflow: hidden; flex: 1; margin-left: auto; margin-right: auto; text-align : center; padding-bottom: 0px; } .scrollable-nav ul{ margin: 0; padding: 0; white-space: nowrap; overflow-x: scroll; text-align: center; } .scrollable-nav li{display:inline-block;list-style:none;margin:0;} .fa-angle-left,.fa-angle-right{font-size:30px!important;padding:5px 10px;height:5px;margin-top:-106px;vertical-align:-4px;} .main-nav-container-general{ background-color: #2499FB; margin-top: -91px; margin-left: auto; mar gin-right:auto; padding-bottom: 0px; height: 44px; } .scrollable-nav ul li a{display:block;text-decoration:none;color:#fff;padding:10px 15px;margin-left:-3px;} .nav-bar-font-size2{ color: #000000; margin-top: -1px; margin-bottom: -31px; height: 44px; } a{text-decoration:none;} .scrollable-nav-container{margin:0 auto;background-color:#f2f2f2;display:flex;align-items:center;max-width:1200px;overflow-x :scroll;} .scrollable-nav-inner{overflow:hidden;flex:1;} .scrollable-nav ul{margin:0;padding:0;white-space:nowrap;overflow-x:scroll;} .test { height: 60px; } .scrollable-nav li{display:inline-block;list-style:none;margin:0;} .scrollable-nav ul li a{display:block;text-decoration:none;color:#fff;padding:10px 15px;} .fa-angle-left,.fa-angle-right{font-size:30px!important;padding:5px 10px;height:5px;margin-top:-106px;vertical-align:-4px;} @media (max-width:410px){ .main-nav-container-general{margin-bottom:83px;} } /*! CSS Used from: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css */ .fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz -osx-font-smoothing:grayscale;} .fa-angle-left:before{content:"\f104";} .fa-angle-right:before{content:"\f105";} /*! CSS Used fontfaces */ </style> </head>  <div class="main-nav-container-general font nav-bar-font-size2"> <nav class="scrollable-nav"> <a id="search-target"></a> <ul class="test"> <li><a href="" class="fa fa-angle-left"></a></li> <li class="active-top-menu"><a HREF="javascript:javascript:history.go(-1)" class="dark-grey-panel">Back</a></li> <li><a href="" class="red-panel">TYF</a></li> <li><a href="" class="email-link">Email</a></li> <li><a href="" class="fb-link">Facebook</a></li> <li><a href="" class="tw-link">Twitter</a></li> <li><a href="" class="wa-link">Whatsapp</a></li> <li><a href="" class="mes-link">Messenger</a></li> <li><a href="" class="fa fa-angle-right"></a></li> </ul> </nav> </div>   <script src="js/popper.min.js"></script> <script src="js/bootstrap-4.3.1.js"></script> <script>  $(document).ready(function() { $(".scrollable-nav").draggable({ axis: 'x' }); });  </script>  </html>

tim cross · ‎Aug 03, 2019

I wonder if you can help please? I am not sure how to get rid of the scoll showing on PC browers for explorer etc? they do not show up on a mac brower or Google Os Im guessing it css but cant work it out ;-( Thanks Tim -------- <!doctype html> <html lang="zxx"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Untitled Document</title> <link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,600,700,800,900" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Encode+Sans+Semi+Expanded:500,700" rel="stylesheet"> <link rel="stylesheet" href="css/ti.css">  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(document).ready(function() { $(".scrollable-nav").draggable({ axis: 'x' }); }); </script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script> $(document).ready(function() { $(".heart-plus").click(function(){ $(this).toggleClass("minus"); }); }); $(document).ready(function() { $(".notications-plus").click(function(){ $(this).toggleClass("minus"); }); }); $(document).ready(function() { $(".likes-plus").click(function(){ $(this).toggleClass("minus"); }); }); </script>   <style> .body { overflow:hidden; } /*! CSS Used from: http://www.tcdesignstamford.co.uk/tim/css/general.css */ *{margin:0;padding:0;} li{font-size:20px;} .font{font-family:'Fira Sans', sans-serif;} .red-panel{background-color:#FE0001;} .dark-grey-panel{background-color:#37494B;} a{color:#FFFFFF;text-decoration:none;} .scrollable-nav-container{margin:0 auto;background-color:#f2f2f2;display:flex;align-items:center;max-width:1200px;overflow-x:scroll;} .scrollable-nav-inner{overflow:hidden;flex:1;margin-left:auto;margin-right:auto;text-align:center;} .scrollable-nav ul{margin:0;padding:0;white-space:nowrap;overflow-x:scroll;} .scrollable-nav li{display:inline-block;list-style:none;margin:0;} .fa-angle-left,.fa-angle-right{font-size:30px!important;padding:5px 10px;height:5px;margin-top:-106px;vertical-align:-4px;} .main-nav-container-general{background-color:#2499FB;margin-top:-91px;margin-left:auto;margin-right:auto;} .scrollable-nav ul li a{display:block;text-decoration:none;color:#fff;padding:10px 15px;margin-left:-3px;} .nav-bar-font-size2{color:#000000;margin-top:-1px;margin-bottom:-31px;} a{text-decoration:none;} .scrollable-nav-container{margin:0 auto;background-color:#f2f2f2;display:flex;align-items:center;max-width:1200px;overflow-x:scroll;} .scrollable-nav-inner{overflow:hidden;flex:1;} .scrollable-nav ul{margin:0;padding:0;white-space:nowrap;overflow-x:scroll;} .scrollable-nav li{display:inline-block;list-style:none;margin:0;} .scrollable-nav ul li a{display:block;text-decoration:none;color:#fff;padding:10px 15px;} .fa-angle-left,.fa-angle-right{font-size:30px!important;padding:5px 10px;height:5px;margin-top:-106px;vertical-align:-4px;} @media (max-width:410px){ .main-nav-container-general{margin-bottom:83px;} } /*! CSS Used from: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css */ .fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} .fa-angle-left:before{content:"\f104";} .fa-angle-right:before{content:"\f105";} /*! CSS Used fontfaces */ @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:300;src:local('Fira Sans Light'), local('FiraSans-Light'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnPKreSxf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:300;src:local('Fira Sans Light'), local('FiraSans-Light'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnPKreQhf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:300;src:local('Fira Sans Light'), local('FiraSans-Light'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnPKreShf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+1F00-1FFF;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:300;src:local('Fira Sans Light'), local('FiraSans-Light'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnPKreRRf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0370-03FF;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:300;src:local('Fira Sans Light'), local('FiraSans-Light'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnPKreSRf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:300;src:local('Fira Sans Light'), local('FiraSans-Light'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnPKreSBf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:300;src:local('Fira Sans Light'), local('FiraSans-Light'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnPKreRhf6Xl7Glw.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:400;src:local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v10/va9E4kDNxMZdWfMOD5VvmojLazX3dGTP.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:400;src:local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v10/va9E4kDNxMZdWfMOD5Vvk4jLazX3dGTP.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:400;src:local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v10/va9E4kDNxMZdWfMOD5Vvm4jLazX3dGTP.woff2) format('woff2');unicode-range:U+1F00-1FFF;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:400;src:local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v10/va9E4kDNxMZdWfMOD5VvlIjLazX3dGTP.woff2) format('woff2');unicode-range:U+0370-03FF;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:400;src:local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v10/va9E4kDNxMZdWfMOD5VvmIjLazX3dGTP.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:400;src:local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v10/va9E4kDNxMZdWfMOD5VvmYjLazX3dGTP.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:400;src:local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v10/va9E4kDNxMZdWfMOD5Vvl4jLazX3dA.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:500;src:local('Fira Sans Medium'), local('FiraSans-Medium'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnZKveSxf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:500;src:local('Fira Sans Medium'), local('FiraSans-Medium'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnZKveQhf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:500;src:local('Fira Sans Medium'), local('FiraSans-Medium'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnZKveShf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+1F00-1FFF;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:500;src:local('Fira Sans Medium'), local('FiraSans-Medium'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnZKveRRf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0370-03FF;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:500;src:local('Fira Sans Medium'), local('FiraSans-Medium'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnZKveSRf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:500;src:local('Fira Sans Medium'), local('FiraSans-Medium'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnZKveSBf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:500;src:local('Fira Sans Medium'), local('FiraSans-Medium'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnZKveRhf6Xl7Glw.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:600;src:local('Fira Sans SemiBold'), local('FiraSans-SemiBold'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnSKzeSxf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:600;src:local('Fira Sans SemiBold'), local('FiraSans-SemiBold'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnSKzeQhf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:600;src:local('Fira Sans SemiBold'), local('FiraSans-SemiBold'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnSKzeShf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+1F00-1FFF;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:600;src:local('Fira Sans SemiBold'), local('FiraSans-SemiBold'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnSKzeRRf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0370-03FF;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:600;src:local('Fira Sans SemiBold'), local('FiraSans-SemiBold'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnSKzeSRf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:600;src:local('Fira Sans SemiBold'), local('FiraSans-SemiBold'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnSKzeSBf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:600;src:local('Fira Sans SemiBold'), local('FiraSans-SemiBold'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnSKzeRhf6Xl7Glw.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:700;src:local('Fira Sans Bold'), local('FiraSans-Bold'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnLK3eSxf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:700;src:local('Fira Sans Bold'), local('FiraSans-Bold'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnLK3eQhf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:700;src:local('Fira Sans Bold'), local('FiraSans-Bold'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnLK3eShf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+1F00-1FFF;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:700;src:local('Fira Sans Bold'), local('FiraSans-Bold'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnLK3eRRf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0370-03FF;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:700;src:local('Fira Sans Bold'), local('FiraSans-Bold'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnLK3eSRf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:700;src:local('Fira Sans Bold'), local('FiraSans-Bold'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnLK3eSBf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:700;src:local('Fira Sans Bold'), local('FiraSans-Bold'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnLK3eRhf6Xl7Glw.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:800;src:local('Fira Sans ExtraBold'), local('FiraSans-ExtraBold'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnMK7eSxf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:800;src:local('Fira Sans ExtraBold'), local('FiraSans-ExtraBold'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnMK7eQhf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:800;src:local('Fira Sans ExtraBold'), local('FiraSans-ExtraBold'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnMK7eShf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+1F00-1FFF;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:800;src:local('Fira Sans ExtraBold'), local('FiraSans-ExtraBold'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnMK7eRRf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0370-03FF;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:800;src:local('Fira Sans ExtraBold'), local('FiraSans-ExtraBold'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnMK7eSRf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:800;src:local('Fira Sans ExtraBold'), local('FiraSans-ExtraBold'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnMK7eSBf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:800;src:local('Fira Sans ExtraBold'), local('FiraSans-ExtraBold'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnMK7eRhf6Xl7Glw.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:900;src:local('Fira Sans Black'), local('FiraSans-Black'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnFK_eSxf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:900;src:local('Fira Sans Black'), local('FiraSans-Black'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnFK_eQhf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:900;src:local('Fira Sans Black'), local('FiraSans-Black'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnFK_eShf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+1F00-1FFF;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:900;src:local('Fira Sans Black'), local('FiraSans-Black'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnFK_eRRf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0370-03FF;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:900;src:local('Fira Sans Black'), local('FiraSans-Black'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnFK_eSRf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:900;src:local('Fira Sans Black'), local('FiraSans-Black'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnFK_eSBf6Xl7Gl3LX.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;} @Blissful_help0D4E-face{font-family:'Fira Sans';font-style:normal;font-weight:900;src:local('Fira Sans Black'), local('FiraSans-Black'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnFK_eRhf6Xl7Glw.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @Blissful_help0D4E-face{font-family:'FontAwesome';src:url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');src:url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot#iefix&v=4.7.0') format('embedded-opentype'),url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal;} </style> </head>  <div class="main-nav-container-general font nav-bar-font-size2"> <div class="scrollable-nav-container"> <div class="arrow-left"><i class="fa fa-angle-left"></i></div> <div class="scrollable-nav-inner"> <nav class="scrollable-nav"> <a id="search-target"></a> <ul> <li class="active-top-menu"><a HREF="javascript:javascript:history.go(-1)" class="dark-grey-panel">Back</a></li> <li><a href="" class="red-panel">TYF</a></li> <li><a href="" class="email-link">Email</a></li> <li><a href="" class="fb-link">Facebook</a></li> <li><a href="" class="tw-link">Twitter</a></li> <li><a href="" class="wa-link">Whatsapp</a></li> <li><a href="" class="mes-link">Messenger</a></li> </ul> </nav> </div> <div class="arrow-right"><i class="fa fa-angle-right"></i></div> </div> </div>  </div> </div> </div> </div>   <script src="js/popper.min.js"></script> <script src="js/bootstrap-4.3.1.js"></script>  <script src="../js/popper.min.js"></script> <script src="../js/bootstrap-4.2.1.js"></script> <script>  $(document).ready(function() { $(".scrollable-nav").draggable({ axis: 'x' }); });  </script>  <script>  $(document).ready(function() { $(".date-scrollable-nav").draggable({ axis: 'x' }); });  </script>  </html>

tim cross · ‎Jun 16, 2019

I am not sure if this is possible or not? I am using a backlink as shown below <li class="active-top-menu"><a HREF="javascript:javascript:history.go(-1)" class="dark-grey-panel">Back</a></li> But is it possible to link it to #search-target So when you click the back button it goes to a certain part of the other page? Any suggestions Thanks Tim

tim cross · ‎May 29, 2019

I found some code, so when you click on the button, it changes. On the demo, it works, but when I try to add the code, I’m not sure where to place it within the HTML to get it to work, tried everywhere but can’t get it to work. My plan to have three buttons ( can’t even get one to work!) which will be a HEART image - BELL image and a Thump image for Likes which I have created illustrations for them. Additional code will be added later just need to the simple part sorted first! Hope you can have a look, please? Tim ------------ ----------- $(".plus").click(function(){ $(this).toggleClass("minus") ; }) .plus{ background-image: url("https://cdn0.iconfinder.com/data/icons/ie_Bright/128/plus_add_blue.png"); width:130px; height:130px; background-repeat:no-repeat; } .plus.minus{ background-image: url("https://cdn0.iconfinder.com/data/icons/ie_Bright/128/plus_add_minus.png"); width:130px; height:130px; background-repeat:no-repeat; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#"><div class="plus">CHANGE</div></a> ———————————— https://stackoverflow.com/questions/6764961/change-an-image-with-onclick

tim cross · ‎May 22, 2019

YES that makes sense, thank you

tim cross · ‎May 22, 2019

I have created boxes which flow so as you make the screen smaller they goto the next line which is OK on DESKTOP But on TABLET AND IPHONE I want to alter the width of the squares to fill the area better for the TABLET and on the iPhone screen so I need to reduce the width so I can get two squares side by side. In GLOBAL (desktop) - .item .productbox control the size of the squares and the spacing BUT when I try to add .item .productbox as a media query for tablet and mobile sizes it does not alter the size of the panel?? 1) On a tablet, I want to alter the width so it's three up but fills the screen nearly 2) On Mobile, I want to have it two side by side with a slight gap Not sure what I'm doing wrong? Hope you can help Thanks Tim --------------- --------------- <!doctype html> <html lang="en-GB"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, minimal-ui"> <title>Untitled Document</title> <link rel="stylesheet" href="css/search-results-panels-list.css" />  <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <style> .search-grey-panel { width: 118%; height: 0px; padding-top: 10px; padding-bottom: 55px; padding-left: 14px; margin-left: -22px; margin-top: 58px; margin-bottom: -19px; background-color: rgba(0,0,0,0.68); } .list-grey-panel { margin-top: 98px; } .login-button-index { color: rgba(0,0,0,1.00); font-style: italic; font-size: 21px; width: 70px; margin-right: -30px; margin-left: -1px; } .search-event-name { font-size: 16px; margin-top: 1px; width: 170px; color: rgba(255,255,0,1.00); text-align: left; padding-left: 6px; padding-top: 0px; line-height: 20px; padding-bottom: 3px; height: 0px; } .alert-panel-green { width: 118%; height: 0px; padding-top: 0px; padding-bottom: 55px; padding-left: 14px; margin-left: -22px; margin-top: -223px; margin-bottom: -19px; background-color: rgba(28,186,84,1.00); } .yellow-text { color: #F2FF00; } .line2 { font-size: 15px; margin-top: -26px; margin-left: 7px; width: 170px; color: rgba(255,255,255,1.00); text-align: left; } .heart-small { height: 50px; margin-left: 119px; margin-right: -9px; padding-left: 12px; margin-top: -13px; } li.item { position: relative; overflow: hidden; } :root { --gutter: 20px; } .hs > li, .item { scroll-snap-align: center; padding: calc(var(--gutter) / 2 * 1.5); display: table; flex-direction: column; justify-content: center; align-items: center; background-color: #CBCBCB; border-radius: 8px; max-width: 1px; background-size: cover; background-repeat: no-repeat; } .item2 { scroll-snap-align: center; padding: calc(var(--gutter) / 2 * 1.5); display: table; flex-direction: column; justify-content: center; align-items: center; background-color: #CBCBCB; border-radius: 8px; max-width: 1px; background-size: cover; background-repeat: no-repeat; width: 259px; height: 145px; min-width: 174px; } .item { min-width: 174px; height: 145px; margin-left: 1px; padding-right: 5px; } .productShell { background: #fff; margin-top: -19px; margin-right: auto; margin-left: auto; margin-bottom: 0; padding-top: 5px; padding-right: 5px; padding-left: 5px; padding-bottom: 5px; overflow: hidden; text-align: left; max-width: 1013px; } .productBox { float: left; margin: 3px; } .productBox aside { cursor: pointer; background: #fffff; position: absolute; z-index: 2; } .productBox aside h4 { color: #fff; text-transform: uppercase; text-align: right; font-weight: normal; font-size: 24px; margin: 0; padding: 15px; bottom: 0; position: absolute; } .productBox img { position: absolute; z-index: 1; } .productBox, .productBox aside, .productBox img { width: 270px; height: 270px; } .productBox.small, .productBox.small aside, .productBox.small img { width: 193px; height: 176px; } } scroll bar start } box-sizing: border-box; } { box-sizing: border-box; } <style type="text/css"> .form-style-5{ max-width: 500px; padding: 10px 20px; background: #f4f7f8; margin: 10px auto; padding: 20px; background: #f4f7f8; border-radius: 8px; font-family: Georgia, "Times New Roman", Times, serif; } box-sizing: border-box; } @media (max-width:410px){ test { color: #FD0004; } } scroll bar start } box-sizing: border-box; } { box-sizing: border-box; } .form-container { } } box-sizing: border-box; } } @media (max-width:768px) and (min-width:610px){ test { color: #F1A1A3; } } scroll bar start } box-sizing: border-box; } { box-sizing: border-box; } </style>  <div class="main-container"> <div class="header-search-container"> <br> <div class="productShell"> <div class="productBox small"> <aside> <li class="item"> <div class="search-grey-panel list-grey-panel"> <div class="module line-clamp"></div> </div> </li> </aside> </div> <div class="productBox small"> <aside> <li class="item"> <div class="search-grey-panel list-grey-panel"> <div class="module line-clamp"></div> <p class="line2 text-white2"> </p></div> </li> </aside> </div> <div class="productBox small color-orange"> <aside> <li class="item"> <div class="search-grey-panel list-grey-panel"> <div class="module line-clamp"></div> <p class="line2 text-white2"> </p></div> </li> </aside> </div> <div class="productBox small"> <aside> <li class="item"> <div class="search-grey-panel list-grey-panel"> <div class="module line-clamp"></div> <p class="line2 text-white2"> </p></div> </li> </aside> </div> <div class="productBox small"> <aside> <li class="item"> <div class="search-grey-panel list-grey-panel"> <div class="module line-clamp"></div> <p class="line2 text-white2"> </p></div> </li> </aside> </div> <div class="productBox small"> <aside> <li class="item"> <div class="search-grey-panel list-grey-panel"> <div class="module line-clamp"></div> <p class="line2 text-white2"> </p></div> </li> </aside> </div> </div> </div>  </html> ---------------------- ----------------------

tim cross · ‎May 17, 2019

No, that code does not work! http://www.tcdesignstamford.co.uk/test.html 1) Click on the link above - goes to page 1 2) one page 1 press - Click Here - button ( which goes to page 2) 3) Scroll down to the bottom of page 2 4) click on TOP - button which takes you to the top of the page 5) Then click on Back button which has a link to go to page 1 ( but instead it goes to the bottom of the page) ---- But when you click on http://www.tcdesignstamford.co.uk/test.html which goes to page 2 and then click on BACK it goes to page 1 Does anyone know how to get around this, please? Thanks Tim

tim cross · ‎May 16, 2019

I've got a problem with a back button and a GOTO TOP of page button. From test.html I click on a link to open test2.html * When I scroll down to the bottom of the page of test2.html and click on the' TOP' button link it goes to the top of the page which is fine * BUT when you click on the 'BACK' button which part of a nav bar it goes to the bottom of the page instead. * If I scroll up, the page and then click the BACK button it then goes to the previous page ie test.html Not sure how to get around this as I need both a back button and link to go to top of page ?? Hope you can help Tim (I have just attached the second-page test2.html code below and not the page it goes back to which in the code goes back to test.html) -------------------- <!doctype html> <html lang="zxx"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Untitled Document</title> !--Nav Bar Start--> <a id="search-target"></a> <li class="active-top-menu"><a HREF="javascript:javascript:history.go(-1)" class="dark-grey-panel">Back</a></li>  <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>  <a href="#search-target"> <div class="font eventify-location-admin"><span style="color:#2499FB">- TOP</span></div></a>  </div> </html> ----------------------

tim cross · ‎May 11, 2019

That is perfect. Thank You. Just one other question about tabs on bootstrap. What is the best way to link to a page but on that page, I need it to open Tab 2 instead of the standard tab 1?? Thanks Tim

tim cross · ‎May 10, 2019

I am using bootstrap 4.3.1 for a tab bar. I want to have different colour tab bars on different HTML pages. say blue / red/ orange / green I can change the colour in the css but it alters them all. I have tried to copy the css and change the name and alter the name in the css and html page but this does not work. This is the code that changes the tab bar colour is bootstap .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: #FFFFFF; background-color: #2399FB; border-color: #dee2e6 #dee2e6 #fff; } is there a way to do this? thanks Tim

tim cross · ‎Apr 30, 2019

I found some code that allows the tab bar to be moved as a wipe motion which on desktop work then you click on each tab and on mobile and tablets via the swipe motion. example attached: http://www.tcdesignstamford.co.uk/scroll.html The only problem is when the table resizes the tab section it go onto the second line or text get smaller. instead of just hiding with a hidden side scroll system. is there a way to do this any suggestions please? Tim code attached: ---- <!DOCTYPE html> <html lang="en"> <head> </head> <body> <style> @charset "UTF-8"; h1, h2, h3, h4, h5, h6 { margin: 0; } body { font-family:'Roboto'; background-color:#fafafa;} pre { padding: 30px; background-color: #ececec; white-space: pre-wrap; word-wrap: break-word; line-height: 1.8; } .wrap { width: 960px; margin: 150px auto; } .heading01, .heading02 { color: #247BA0; padding-bottom: 0.2em; border-bottom: 2px solid #247BA0; } .heading01 { margin: 50px 0; } .heading02 { margin: 30px 0; } .table01 { margin: 30px 0; width: 100%; border: 1px solid #70C1B3; border-width: 1px 0 0 1px; border-collapse: collapse; overflow-x: scroll; } .table01 th, .table01 td { padding: 20px; border: 1px solid #70C1B3; border-width: 0 1px 1px 0; text-align: left; vertical-align: top; line-height: 1.5; } @media (max-width:640px) { .wrap { width: auto; margin: 0; padding: 20px 10px; } } @charset "UTF-8"; .swichtab-controller { display: flex; flex-flow: row wrap; justify-content: space-between; margin: 0; padding: 0; list-style: none; } .swichtab-controller > li { flex: 1 1 auto; border: #70C1B3 1px solid; border-width: 1px 1px 1px 0; } .swichtab-controller > li:first-child { border-width: 1px; } .swichtab-controller > li > a { display: flex; height: 50px; align-items: center; justify-content: center; flex: 1 1 auto; color: #70C1B3; text-decoration: none; } .swichtab-controller > li.is-active > a { background-color: #70C1B3; color: #fff; } .swichtab-contents { padding: 20px; border: #70C1B3 1px solid; border-width: 0 1px 1px 1px; overflow: hidden; } .swichtab-panel { display: none; } </style> <div class="wrap">  <div class="tabGroup tabGroup2"> <ul class="swichtab-controller"> <li data-swichtab="controller"><a href="#tab1">tab1</a></li> <li data-swichtab="controller"><a href="#tab2">tab2</a></li> <li data-swichtab="controller"><a href="#tab3">tab3</a></li> <li data-swichtab="controller"><a href="#tab4">tab4</a></li> <li data-swichtab="controller"><a href="#tab5">tab5</a></li> <li data-swichtab="controller"><a href="#tab6">tab6</a></li> <li data-swichtab="controller"><a href="#tab7">tab7</a></li> <li data-swichtab="controller"><a href="#tab8">tab8</a></li> <li data-swichtab="controller"><a href="#tab9">tab9</a></li> <li data-swichtab="controller"><a href="#tab10">tab10</a></li> </ul> <div class="swichtab-contents"> <div id="tab1" class="swichtab-panel" data-swichtab="target"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div id="tab2" class="swichtab-panel" data-swichtab="target"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div id="tab3" class="swichtab-panel" data-swichtab="target"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div id="tab4" class="swichtab-panel" data-swichtab="target"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div id="tab5" class="swichtab-panel" data-swichtab="target"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div id="tab6" class="swichtab-panel" data-swichtab="target"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div id="tab7" class="swichtab-panel" data-swichtab="target"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div id="tab8" class="swichtab-panel" data-swichtab="target"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div id="tab9" class="swichtab-panel" data-swichtab="target"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div id="tab10" class="swichtab-panel" data-swichtab="target"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div>  </div>  </div>  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="./src/js/jquery.swichTab.js" charset="utf-8"></script> <script type="text/javascript"> $('.tabGroup1').swichTab(); $('.tabGroup2').swichTab({ cahngePanel: 'fade', swiper: true, index: 2, }); </script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-36251023-1']); _gaq.push(['_setDomainName', 'jqueryscript.net']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </body> </html> ----------- ---------- Java scrip code ------- (function($) { $.fn.swichTab = function(options) { var elements = this; var opts = $.extend({}, $.fn.swichTab.defaults, options); elements.each(function() { $(this).data('swichTab', new swichTab($(this), opts)); }); return this; }; $.fn.swichTab.defaults = { cahngePanel: 'toggle', swiper: false, index: 0, }; function swichTab(elm, opts) { var self = this, $swichtab = elm, $controller = elm.find('[data-swichtab="controller"]'), $target = elm.find('[data-swichtab="target"]'); this.handleEvent = function() { // click event $controller.on("click", function(e) { var i = $(this).index(); e.preventDefault(); // cahngePanel if (opts.cahngePanel === 'toggle') { $controller.removeClass("is-active"); $(this).addClass("is-active"); $target.removeClass("is-active").hide().eq(i).addClass("is-active").show(); } else if (opts.cahngePanel === 'fade') { $controller.removeClass("is-active"); $(this).addClass("is-active"); $target.removeClass("is-active").hide().eq(i).addClass("is-active").stop().fadeIn(); } }); // swiper if (opts.swiper === true) { self.swiper(elm); } }; this.swiper = function(elm) { var targetLength = $target.length, currentIndex = $target.filter('is-active').index(), goToIndex = '', direction, position, y1, y2; function goToPrev() { if (currentIndex <= 0) { goToIndex = (targetLength - 1) % targetLength; } else { goToIndex = (currentIndex - 1); } $controller.removeClass('is-active').eq(goToIndex).addClass('is-active'); $target.removeClass("is-active").hide().eq(goToIndex).addClass("is-active").stop().fadeIn(); currentIndex = goToIndex; } function goToNext() { goToIndex = (currentIndex + 1) % targetLength; $controller.removeClass('is-active').eq(goToIndex).addClass('is-active'); $target.removeClass("is-active").hide().eq(goToIndex).addClass("is-active").stop().fadeIn(); currentIndex = goToIndex; } elm.on('touchstart', onTouchStart); elm.on('touchmove', onTouchMove); elm.on('touchend', onTouchEnd); function onTouchStart(event) { y1 = event.originalEvent.touches[0].clientY; position = getPositionX(event); direction = ''; } function onTouchMove(event) { y2 = event.originalEvent.touches[0].clientY; if (Math.abs(y1 - y2) < 5) { event.preventDefault(); } if (position - getPositionX(event) > 100) { direction = 'left'; } else if (position - getPositionX(event) < -100) { direction = 'right'; } } function onTouchEnd(event) { if (direction == 'right') { goToPrev(); } else if (direction == 'left') { goToNext(); } } function getPositionX(event) { return event.originalEvent.touches[0].pageX; } }; this.init = function() { $controller.eq(opts.index).addClass("is-active").show(); $target.eq(opts.index).addClass("is-active").show(); self.handleEvent(); }; return self.init(); } }(jQuery)); ------ ------

tim cross · ‎Apr 28, 2019

this is the code so far but does not really work well.... ----- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Untitled Document</title>  <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, minimal-ui"> <title>Untitled Document</title> <link rel="stylesheet" href="css/bootstrap-4.3.1.css" /> </head> <style> .tabbable .nav-tabs { overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; width: 800px; margin-left: auto; margin-right: auto; }.search-container { background-color: #FFE1E2; width: 800px; height: 1500px; margin-left: auto; margin-right: auto; } .search-container2 { padding-top: 21px; padding-left: 23px; padding-right: 43px; } .fav-delete-button { height: 50px; margin-left: 119px; margin-right: -9px; padding-left: 12px; margin-top: -13px; } .cp-black-panel { width: 118%; height: 28px; padding-top: 10px; padding-bottom: 55px; padding-left: 14px; margin-left: -22px; margin-top: 70px; margin-bottom: -37px; background-color: rgba(0,0,0,0.68); }.other-shops-services { color: rgba(0,0,0,1.00); margin-left: 182px; margin-top: -371px; transform: rotate(90deg); width: 0px; height: 374px; font-size: 18px; background-color: rgba(253,0,4,1.00); } .search-grey-panel { width: 123%; height: 0px; padding-top: 10px; padding-bottom: 55px; padding-left: 14px; margin-left: -22px; margin-top: 58px; margin-bottom: -19px; background-color: rgba(0,0,0,0.68); } .testtest2 { width: 118%; height: 0px; padding-top: 0px; padding-bottom: 55px; padding-left: 14px; margin-left: -22px; margin-top: -231px; margin-bottom: -19px; background-color: rgba(36,153,251,1.00); } .login-button-index { color: rgba(0,0,0,1.00); font-style: italic; font-size: 21px; width: 70px; margin-right: -30px; margin-left: -1px; } .search-event-name { font-size: 16px; margin-top: 1px; width: 170px; color: rgba(255,255,0,1.00); text-align: left; padding-left: 6px; padding-top: 0px; line-height: 20px; padding-bottom: 3px; height: 0px; } .alert-panel-green { width: 118%; height: 0px; padding-top: 0px; padding-bottom: 55px; padding-left: 14px; margin-left: -22px; margin-top: -223px; margin-bottom: -19px; background-color: rgba(28,186,84,1.00); } .alert-panel-orange { width: 118%; height: 0px; padding-top: 0px; padding-bottom: 55px; padding-left: 14px; margin-left: -22px; margin-top: -223px; margin-bottom: -19px; background-color: #F88826; } .alert-panel-light-blue { width: 118%; height: 0px; padding-top: 0px; padding-bottom: 55px; padding-left: 14px; margin-left: -22px; margin-top: -223px; margin-bottom: -19px; background-color: #80C5FE; } .black-search-panel { width: 118%; height: 0px; padding-top: 0px; padding-bottom: 55px; padding-left: 14px; margin-left: -22px; margin-top: -207px; margin-bottom: -19px; background-color: rgba(36,153,251,1.00); } .cp-top-panel-text { color: #E6FF00; font-size: 23px; text-align: left; line-height: 27px; margin-top: -4px; font-weight: 500; margin-left: 9px; width: 167px; margin-bottom: 14px; } .white-text { color: #FFFFFF; } .yellow-text { color: #F2FF00; } .cp-link-button { color: #FFFFFF; font-size: 12px; margin-top: -17px; margin-left: -7px; width: 187px; } .line2 { font-size: 15px; margin-top: -26px; margin-left: 7px; width: 170px; color: rgba(255,255,255,1.00); text-align: left; } .heart-small { height: 50px; margin-left: 119px; margin-right: -9px; padding-left: 12px; margin-top: -13px; } li.item { position: relative; overflow: hidden; background-color: #F75B5E; } .item .bottom-panel { bottom: 0; position: absolute; width: 100%; left: 0; margin:0; height: auto; } .item .bottom-panel p { margin: 0; padding-top: 0px; padding-right: 10px; padding-left: 10px; padding-bottom: 6px; } .top-button { margin: 0; position: absolute; right: 14px; border-radius: 6px; } :root { --gutter: 20px; } .app { padding: var(--gutter) 0; display: grid; grid-gap: var(--gutter) 0; grid-template-columns: var(--gutter) 1fr var(--gutter); align-content: start; } .app > * { grid-column: 2 / -2; } .list-button { width: 53px; margin-left: 1104px; margin-top: -20px; font-size: 23px; margin-bottom: -37px; height: 36px; font-style: italic; visibility: hidden; } .app > .full { grid-column: 1 / -1; margin-bottom: -58px; margin-top: 4px; } .hs { display: grid; grid-gap: calc(var(--gutter) / 2); grid-template-columns: 10px; grid-template-rows: minmax(50px, 1fr); grid-auto-flow: column; grid-auto-columns: calc(20% - var(--gutter) * 2); overflow-x: scroll; scroll-snap-type: x proximity; padding-bottom: calc(.75 * var(--gutter)); margin-bottom: calc(-.25 * var(--gutter)); width: 1200px; margin-left: -20px; } .hs:before, .hs:after { content: ''; width: 10px; } ul { list-style: none; padding: 0; } h1, h2, h3 { margin: 0; } .app { height: 182px; /* [disabled]background-color: #DBD0BC; */ overflow-y: scroll; margin-bottom: 57px; margin-left: auto; margin-right: auto; margin-top: 3px; clear: right; max-width: 1200px; } .red-text { color: #FF0004; font-weight: 600; } .hs > li, .item { scroll-snap-align: center; padding: calc(var(--gutter) / 2 * 1.5); display: table; flex-direction: column; justify-content: center; align-items: center; background-color: #CBCBCB; border-radius: 8px; max-width: 1px; background-image: url(../images/demo-image.jpg); background-size: cover; background-repeat: no-repeat; } .item2 { scroll-snap-align: center; padding: calc(var(--gutter) / 2 * 1.5); display: table; flex-direction: column; justify-content: center; align-items: center; background-color: #CBCBCB; border-radius: 8px; max-width: 1px; background-size: cover; background-repeat: no-repeat; width: 259px; height: 145px; min-width: 174px; } .bottom-panel { background-color: #FF0004; width: 170px; height: 42px; margin-top: 74px; } .top-button { background-color: #FB3437; width: 29px; height: 24px; margin-left: 139px; margin-top: 4px; } .item { width: 220px; min-width: 174px; height: 106px; margin-left: 1px; } .grey-panel { background-color: #000000; width: 169px; height: 54px; margin-left: 0px; margin-top: 82px; padding-top: var(; padding-bottom: --gutter; padding-right: --gutter; } .side-search-strip { }.bottom-search-panel { height: 93px; background-color: #FA2E32; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .add-event-2 { } .profile-advert1-text { } .profile1-text { margin-left: 64px; margin-top: 49px; margin-bottom: -46px; } .admin-welecome-text { margin-top: -13px; margin-left: -75px; } .red-colour-panel { background-color: #FF0004; } .yellow-colour-panel { background-color: #FFFF00; } .header-search-container { max-width: 800px; } .advertising-advert-text { margin-left: 198px; color: #F1FF00; } </style> <body>  <div class="container-fluid"> <nav class="tabbable font"> <div class="nav nav-tabs" id="nav-tab" role="tablist"> <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> <a class="nav-item nav-link" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> <a class="nav-item nav-link" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> <a class="nav-item nav-link" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> </div> </nav> <div class="tab-content pt-2" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> <div class="search-container"> <div class="search-container2"> <li class="item"><img src="images/no-delete-button.svg" alt="" class="fav-delete-button" /> <div class="search-grey-panel"> <div class="module line-clamp"><p class="search-event-name font">title</p></div> <p class="line2 text-white2"> </p></div> </li> </div> </div> </div> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Profile</div> <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">Contact</div> </div> </div>  <script src="js/jquery-3.3.1.min.js"></script>  <script src="js/popper.min.js"></script> <script src="js/bootstrap-4.3.1.js"></script> </body> </html>

tim cross · ‎Apr 28, 2019

I am trying to find a widget that does this action. mov attached so you can see what I'm trying to find: http://www.tcdesignstamford.co.uk/test.mov On a tablet or mobile when you sideswipe, it changes the tab bar and does not move the images as they are set to scroll down the page. The code I am using, scrolls at the top but the tabs, you have to be clicked on to change the pages instead of sideswiping it. thats why im trying to find some different code to do this? also because I have added a panel within the box which will hold an image and text inside the black panel I can't seem to get the panel to repeat so that it flows down the page as shown here. (for some reason it always goes down the page as one row) any suggestions? Thanks Tim

tim cross · ‎Apr 27, 2019

Hi, Im not sure what type of plugin NOWTV use to create this (photo attached below) At the top,it has a side scroll and when you click on the links it loads as a tab bar on each section. I'm not sure if there is a plugin similar to this I could use or best way to create this? (On desktop I'm planning to have 5 images - tablet 4 images and Mobile 2 images per line) Any thought would be most helpful Thanks Tim

tim cross · ‎Apr 04, 2019

Thank you all, that's perfect, there is always too many options to choose from!

tim cross · ‎Apr 04, 2019

I wonder if someone could tell me the best way to set a maximum character length which I will need to be able to change, depending on the size of desktop/tablet/mobile etc <p>Setting a max character length???????????????????????????????????????????? </p> I have seen a few things on the web but not sure how to add them ------ Note: just change #your-div-id and put your div ID. var myDiv = $('#your-div-id'); myDiv.text(myDiv.text().substring(0,300)) ----- Thanks Tim

tim cross · ‎Mar 04, 2019

Osgood thank you for solving that.

tim cross · ‎Mar 04, 2019

Thank you all for your comments. Yes, I will have to find the extra or missing <div> some how! Can I ask osgood what software do you use to reformat the text ? as it look so much more tidy 😉 Thanks Tim

tim cross

tim cross

Activity

Re: tick box is wrong colour on mobile devices?

tick box is wrong colour on mobile devices?

required popup on form - mobile how to style it?

Re: bootstrap tabs weird white box around text

bootstrap tabs weird white box around text

Re: iPhone 11 height / width - media query sizes??

Re: iPhone 11 height / width - media query sizes??

iPhone 11 height / width - media query sizes??

Re: Media Query not working on macOS Catalina?

Re: Media Query not working on macOS Catalina?

Media Query not working on macOS Catalina?

scroll add extra space in safari browser but looks...

Re: scroll bars showing on a scroll bar on windows...

scroll bars showing on a scroll bar on windows bro...

Back link to link to #search-target on that page?

Button changes images onclick

Re: resizing panel width for tablet and mobile

resizing panel width for tablet and mobile

Re: Back button and Top of page conflict error in ...

Back button and Top of page conflict error in code

Re: bootstrap changing colour of tab bar on differ...

bootstrap changing colour of tab bar on different ...

Re: scroll Tab style tab bar?

Re: scroll Tab style tab bar?

Re: scroll Tab style tab bar?

scroll Tab style tab bar?

Re: Setting a max character length??

Setting a max character length??

Re: bootstrap tab bar goes wrong when correct erro...

Re: bootstrap tab bar goes wrong when correct erro...